<template>
	<view>
		<view class="container">
			<!-- 顶部搜索栏区域 -->
			<view class="search-container">
			    <view class="search-bar" @click="toSousuo">
			      <image class="search-icon" src="/static/img/搜索.png" ></image>
			      <text class="search-text">精品零食抢购</text>
			    </view>
				<view class="chat-icon-container" @click="toXiaoxi">
					<image class="chat-icon" src="/static/img/消息.png"></image>
					<view class="message-badge" v-if="unreadMessageCount > 0">{{ unreadMessageCount }}</view>
				</view>
				<image class="menu-icon" src="/static/img/扫一扫.png"></image>
			</view>	
			<!-- 轮播图区域 -->	
				      <navigator url="/pages/zuanti/zuanti" >
			<swiper class="banner-swiper" indicator-dots autoplay circular>
			      <swiper-item>
			        <image class="banner-img" src="/static/img/首页轮播图1.jpg"></image>
			      </swiper-item>
			      <swiper-item>
			        <image class="banner-img" src="/static/img/首页轮播图2.gif"></image>
			      </swiper-item>
			    </swiper>
				 </navigator>
				<!-- 功能图标栏 -->
				    <view class="func-grid">
				      <navigator url="/pages/miaoshahuodong/miaoshahuodong" class="func-item">
				        <image class="func-icon" src="/static/img/秒杀活动.png"></image>
				        <text class="func-text">秒杀活动</text>
				      </navigator>
					  <navigator url="/pages/couponCenter/CouponCenter" class="func-item">
					    <image class="func-icon" src="/static/img/拼团.png"></image>
					    <text class="func-text">每日拼团</text>
					  </navigator>
				      <navigator url="/pages/lingquanzhongxin/lingquanzhongxin" class="func-item">
				        <image class="func-icon" src="/static/img/领劵中心.png"></image>
				        <text class="func-text">领券中心</text>
				      </navigator>
				      <navigator url="/pages/jifenshangpin/jifenshangpin" class="func-item">
				        <image class="func-icon" src="/static/img/积分商品管理.png"></image>
				        <text class="func-text">积分商品</text>
				      </navigator>
					  <navigator url="/pages/couponCenter/CouponCenter" class="func-item">
					    <image class="func-icon" src="/static/img/签到.png"></image>
					    <text class="func-text">每日签到</text>
					  </navigator>
				      <navigator url="/pages/shenghuojiadian/shenghuojiadian" class="func-item">
				        <image class="func-icon" src="/static/img/生活家电.png"></image>
				        <text class="func-text">生活家电</text>
				      </navigator>
				      <navigator url="/pages/shenghuojiadian/shenghuojiadian" class="func-item">
				        <image class="func-icon" src="/static/img/手机数码电脑.png"></image>
				        <text class="func-text">手机数码</text>
				      </navigator>
					  <navigator url="/pages/phoneDigital/PhoneDigital" class="func-item">
					    <image class="func-icon" src="/static/img/橘子.png"></image>
					    <text class="func-text">砍价活动</text>
					  </navigator>
					  <navigator url="/pages/phoneDigital/PhoneDigital" class="func-item">
					    <image class="func-icon" src="/static/img/菜篮.png"></image>
					    <text class="func-text">直播活动</text>
					  </navigator>
				      <navigator url="/pages/personalCenter/PersonalCenter" class="func-item">
				        <image class="func-icon" src="/static/img/个人中心.png"></image>
				        <text class="func-text">个人中心</text>
				      </navigator>
				    </view>
					<!-- 红包领取 -->
					<view class="redpack-container">
						<view class="redpack-banner">
							<!-- 左侧内容区域 -->
							<view class="banner-left">
								<!-- 新人专享标签 -->
								<view class="new-user-tag">新人专享</view>
								
								<!-- 主要内容 -->
								<view class="main-content">
									<text class="highest-text">最高</text>
									<text class="amount-text">300</text>
									<text class="unit-text">元超值红包</text>
								</view>
							</view>
							
							<!-- 右侧按钮区域 -->
							<view class="banner-right">
								<view class="action-button" @click="claimRedPacket">
									<text class="button-text">立即领取</text>
									<view class="ripple-2"></view>
								</view>
							</view>
						</view>
					</view>
					<!-- 广告跳转区域 -->
					<view class="image-container">
						<image class="inline-img" src="/static/img/可乐.png" mode="widthFix"></image>
						<image class="inline-img" src="/static/img/果汁.png" mode="widthFix"></image>
					</view>
					<view class="bottom-image-container">
						<image class="img" src="/static/img/横版海报.jpg" mode="widthFix"></image>
					</view>
					<!-- 商品页面 -->
					<view class="goods-container">
					    <!-- tab 栏 -->
					    <view class="tab-bar">
					      <view 
					        v-for="(item, index) in tabList" 
					        :key="index" 
					        class="tab-item"
					        :class="{ active: currentTab === index }"
					        @tap="switchTab(index)"
					      >
					        <text class="tab-title">{{ item.title }}</text>
					        <text class="tab-subtitle">{{ item.subtitle }}</text>
					      </view>
					    </view>
					
					    <!-- 商品列表 -->
					    <view class="goods-list">
					      <view 
					        v-for="(goods, goodsIndex) in currentGoodsList" 
					        :key="goodsIndex" 
					        class="goods-item"
					        @tap="goToDetail(goods)"
					      >
					        <image class="goods-img" :src="goods.image" mode="widthFix"></image>
					        <view class="goods-info">
					          <text class="goods-name">{{ goods.name }}</text>
					          <text class="goods-price">¥{{ goods.price }}</text>
					        </view>
					      </view>
					    </view>
					  </view>
		</view>
	</view>
	
</template>

<script>
import {get,post,put,del} from '@/config/request.js';	
	export default {
		data() {
			return {

				tabList: [
						{
						  title: "精选",
						  subtitle: "精品推荐",
						  // 假设每个 tab 对应不同的商品分类标识，用于请求数据区分
						  category: "selected" 
						},
						{
						  title: "实惠",
						  subtitle: "便宜好货",
						  category: "affordable" 
						},
						{
						  title: "进口",
						  subtitle: "国际自营",
						  category: "imported" 
						},
						{
						  title: "热卖",
						  subtitle: "冬季热卖",
						  category: "hot" 
						}
				],
				currentTab: 0, // 当前选中的 tab 索引
				unreadMessageCount: 0, // 未读消息数量，初始化为0
				// 获取商品信息参数
				getShop: {
					pageNum: 1,
					pageSize: 1000,
					
				},
				// 商品数据列表
				shopList: [],
				// 商品数据列表（动态从shopList获取）
				goodsData: {}
			}//return
		},//data
		computed: {
			// 根据当前 tab 切换展示的商品列表
			currentGoodsList() {
				const category = this.tabList[this.currentTab].category;
				console.log(category)
				return this.goodsData[category] || [];
				
			}
		},
		methods: {
			async getShopData(){
				try {
					console.log("获取商品信息，参数:", this.getShop)
					const res = await get('/shangpin/platform/list', this.getShop)
					console.log("商品数据:", res)
					
					// 检查返回的数据结构并处理
					if (res && res.rows && res.rows.length > 0) {
						// 如果返回的是数组，将所有商品数据赋值给shopList
						this.shopList = res.rows.map(item => ({
							name: item.productName || item.name || '未知商品',
							price: item.price || 0,
							image: item.mainImage || item.image || item.thumbnail || '/static/img/默认商品图片.png',
							id: item.id || item.productId || Math.random().toString(36).substr(2, 9)
						}))
						console.log("shopList赋值完成", this.shopList)
						
						// 动态生成goodsData
						this.generateGoodsData()
					} else if (res && res.rows) {
						// 如果返回的是单个对象，转换为数组格式
						this.shopList = [{
							name: res.rows.productName || res.rows.name || '未知商品',
							price: res.rows.price || 0,
							image: res.rows.image || res.rows.thumbnail || '/static/img/默认商品图片.png',
							id: res.rows.id || res.rows.productId || Math.random().toString(36).substr(2, 9)
						}]
						console.log("shopList赋值完成，单个商品")
						
						// 动态生成goodsData
						this.generateGoodsData()
					} else {
						// 如果没有数据，设置为空数组
						this.shopList = []
						console.log("没有获取到商品数据")
						
						// 生成空的goodsData
						this.generateGoodsData()
					}
					
					// 如果请求成功，可以在这里处理返回的数据
					if (res && res.success) {
						// 处理商品数据
						console.log("商品列表:", res.data)
					}
				} catch (error) {
					console.error("获取商品信息失败:", error)
					uni.showToast({
						title: '获取商品信息失败',
						icon: 'none',
						duration: 2000
					})
				}
			},
			switchTab(index) {
			       this.currentTab = index;
			       // 若商品数据是接口请求，可在此处调用接口，根据 category 请求对应数据
			       // 例如：this.getGoodsList(this.tabList[index].category)
			},
			goToDetail(goods) {
			       // 跳转到商品详情页
			       console.log('跳转到商品详情:', goods);
			       uni.navigateTo({
			         url: `/pages/goumaishangpin/goumaishangpin?id=${goods.id}`
			       });
			},
			toSousuo(){
				// 跳转到搜索页面
				uni.navigateTo({
					url:'/pages/sousuo/sousuo'
				})
			},
			toXiaoxi(){
				uni.navigateTo({
					url:'/pages/xiaoxi/xiaoxi'
				})
			},
			// 获取未读消息数量
			async getUnreadMessageCount() {
				try {
					// 先重置为0，避免显示旧数据
					this.unreadMessageCount = 0;
					
					// 获取用户ID
					let userId = null;
					const userInfo = uni.getStorageSync('userInfo');
					if (userInfo && userInfo.memberId) {
						userId = userInfo.memberId;
					}
					
					if (!userId) {
						console.log('未找到用户ID，未读消息数量设为0');
						return;
					}
					
					console.log('开始获取未读消息数量，用户ID:', userId);
					
					// 构建请求参数
					const params = {
						pageNum: 1,
						pageSize: 100, // 获取更多消息来计算未读数量
						userId: userId
					};
					
					// 请求通知列表
					const res = await get('/message/inform/list', params);
					console.log('获取消息列表结果:', res);
					
					if (res && res.code === 200) {
						// 计算未读消息数量
						if (res.rows && res.rows.length > 0) {
							const unreadCount = res.rows.filter(item => {
								// 根据后端返回的字段判断未读状态
								const isUnread = !item.isRead || item.isRead === 0 || item.readStatus === 0;
								return isUnread;
							}).length;
							this.unreadMessageCount = unreadCount;
							console.log('计算得到未读消息数量:', unreadCount);
						} else {
							this.unreadMessageCount = 0;
							console.log('没有消息数据，未读数量设为0');
						}
					} else {
						this.unreadMessageCount = 0;
						console.log('API请求失败，未读数量设为0');
					}
					
				} catch (error) {
					console.error('获取未读消息数量失败:', error);
					this.unreadMessageCount = 0;
				}
			},
			// 更新未读消息数量（供其他页面调用）
			updateUnreadCount(count) {
				this.unreadMessageCount = count;
			},
			async claimRedPacket(){
				// 获取用户ID
				try {
					// 获取用户ID
					let userId = null;
					
					// 方法1: 从userInfo获取用户ID（根据登录页面的存储方式）
					const userInfo = uni.getStorageSync('userInfo');
					console.log('从userInfo获取:', userInfo);
					if (userInfo && userInfo.memberId) {
						userId = userInfo.memberId;
						console.log('从userInfo.id获取用户ID:', userId);
					}			
					if (!userId) {				
						console.error('未找到用户ID');
						uni.showToast({
							title: '请先登录',
							icon: 'none',
							duration: 2000
						});
						return;
					}
					
					console.log('当前用户ID:', userId);
					// 构造领取优惠劵函数
					const params={
						memberUserId: userId,
						couponId: 22,
						shopId: 0,
						status: 0
					}
					// 发起领取请求
					const res = await post('/promotion1/userjuan', params);
					console.log("优惠劵领取响应：", res);
					
					// 检查响应结果
					if (res && res.code === 200) {
						uni.showToast({
							title: '红包领取成功！',
							icon: 'success',
							duration: 2000
						});
					} else {
						uni.showToast({
							title: res?.msg || '领取失败，请重试',
							icon: 'none',
							duration: 2000
						});
					}
				} catch (error) {
					console.error('领取红包失败:', error);
					uni.showToast({
						title: '领取失败，请重试',
						icon: 'none',
						duration: 2000
					});
				}
			},
			// 动态生成商品数据
			generateGoodsData() {
				// 默认图片数组
				const defaultImages = [
					"/static/img/香水.png",
					"/static/img/裙子.png", 
					"/static/img/可乐.png",
					"/static/img/果汁.png",
					"/static/img/手办.png"
				]
				
				// 从shopList中获取数据生成goodsData
				this.goodsData = {
					selected: [
						{
							id: this.shopList[0] ? this.shopList[0].id : '1',
							image: this.shopList[0] ? this.shopList[0].image : defaultImages[0] || "/static/img/默认商品图片.png",
							name: this.shopList[0] ? this.shopList[0].name : "女士香水 中瓶装",
							price: this.shopList[0] ? this.shopList[0].price : 290.00
						},
						{
							id: this.shopList[1] ? this.shopList[1].id : '2',
							image: this.shopList[1] ? this.shopList[1].image : defaultImages[1] || "/static/img/默认商品图片.png",
							name: this.shopList[1] ? this.shopList[1].name : "个性女装 格子",
							price: this.shopList[1] ? this.shopList[1].price : 120.00
						},
						{
							id: this.shopList[2] ? this.shopList[2].id : '3',
							image: this.shopList[2] ? this.shopList[2].image : defaultImages[2] || "/static/img/默认商品图片.png",
							name: this.shopList[2] ? this.shopList[2].name : "冰镇可乐 330ml",
							price: this.shopList[2] ? this.shopList[2].price : 3.50
						},
						{
							id: this.shopList[3] ? this.shopList[3].id : '4',
							image: this.shopList[3] ? this.shopList[3].image : defaultImages[3] || "/static/img/默认商品图片.png",
							name: this.shopList[3] ? this.shopList[3].name : "果汁饮料 500ml",
							price: this.shopList[3] ? this.shopList[3].price : 5.50
						}
					],
					affordable: [
						{
							id: this.shopList[4] ? this.shopList[4].id : '5',
							image: this.shopList[4] ? this.shopList[4].image : defaultImages[2] || "/static/img/默认商品图片.png",
							name: this.shopList[4] ? this.shopList[4].name : "冰镇可乐 330ml",
							price: this.shopList[4] ? this.shopList[4].price : 3.50
						}
					],
					imported: [
						{
							id: this.shopList[5] ? this.shopList[5].id : '6',
							image: this.shopList[5] ? this.shopList[5].image : defaultImages[4] || "/static/img/默认商品图片.png",
							name: this.shopList[5] ? this.shopList[5].name : "金光闪闪手办 中型手办",
							price: this.shopList[5] ? this.shopList[5].price : 198.8
						}
					],
					hot: [
						{
							id: this.shopList[6] ? this.shopList[6].id : '7',
							image: this.shopList[6] ? this.shopList[6].image : defaultImages[2] || "/static/img/默认商品图片.png",
							name: this.shopList[6] ? this.shopList[6].name : "可乐整箱装 24瓶",
							price: this.shopList[6] ? this.shopList[6].price : 68.00
						}
					]
				}
				
				console.log("动态生成的goodsData:", this.goodsData)
			}
		},//methods
		onLoad() {
			this.getShopData();
			// 延迟获取未读消息数量，确保用户信息已加载
			setTimeout(() => {
				this.getUnreadMessageCount();
			}, 500);
		},
		onShow() {
			// 页面显示时重新获取未读消息数量
			this.getUnreadMessageCount();
		}
	}//export defaule
</script>

<style>
	.container {
	  background-color: #ffffff;
	}
	.search-container{
		display: flex;
		align-items: center;
	}
	.search-bar {
	  flex: 1;
	  align-items: center;
	  padding: 10rpx 20rpx;
	  background-color: #d8d8d8;
	  border-radius: 30rpx;
	  margin: 10rpx;
	  
	}
	.search-icon {
	  width: 30rpx;
	  height: 30rpx;
	  margin-right: 10rpx;
	}
	.search-text {
	  font-size: 28rpx;
	  color: #999;
	}
	.chat-icon-container {
	  position: relative;
	  margin-left: auto;
	  margin-right: 20rpx;
	}
	
	.chat-icon {
	  width: 36rpx;
	  height: 36rpx;
	}
	
	.message-badge {
	  position: absolute;
	  top: -8rpx;
	  right: -8rpx;
	  background: #ff4757;
	  color: #fff;
	  font-size: 20rpx;
	  padding: 4rpx 8rpx;
	  border-radius: 20rpx;
	  min-width: 24rpx;
	  text-align: center;
	  line-height: 1;
	  font-weight: bold;
	}
	.menu-icon {
	  width: 36rpx;
	  height: 36rpx;
	  margin-right: 20rpx;
	}
	.banner-swiper {
	  width: 100%;
	  height: 300rpx;
	}
	.banner-img {
	  width: 100%;
	  height: 100%;
	}
	.func-grid {
	  display: flex;
	  flex-wrap: wrap;
	  padding: 20rpx;
	}
	.func-item {
	  width: 20%;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  margin-bottom: 30rpx;
	}
	.func-icon {
	  width: 60rpx;
	  height: 60rpx;
	  margin-bottom: 10rpx;
	}
	.func-text {
	  font-size: 26rpx;
	  color: #333;
	}
	.redpack-container {
	  position: relative;
	  width: 94%;
	  margin: 20rpx auto;
	  border-radius: 20rpx;
	  overflow: hidden;
	}
	
	/* 红包横幅 */
	.redpack-banner {
	  display: flex;
	  align-items: center;
	  background: linear-gradient(135deg, #E53935 0%, #C62828 100%);
	  border-radius: 20rpx;
	  position: relative;
	  overflow: hidden;
	  box-shadow: 0 8rpx 24rpx rgba(229, 57, 53, 0.3);
	  border: 2rpx solid rgba(255, 255, 255, 0.1);
	}
	
	/* 背景水印 */
	.redpack-banner::before {
	  content: "一条";
	  position: absolute;
	  top: 50%;
	  left: 20%;
	  transform: translate(-50%, -50%);
	  color: rgba(255, 255, 255, 0.08);
	  font-size: 120rpx;
	  font-weight: bold;
	  z-index: 1;
	  pointer-events: none;
	}
	
	/* 左侧内容区域 */
	.banner-left {
	  flex: 1;
	  padding: 40rpx 30rpx;
	  position: relative;
	  z-index: 2;
	}
	
	/* 新人专享标签 */
	.new-user-tag {
	  display: inline-block;
	  background: rgba(255, 255, 255, 0.15);
	  color: #fff;
	  font-size: 24rpx;
	  padding: 8rpx 16rpx;
	  border-radius: 20rpx;
	  margin-bottom: 20rpx;
	  backdrop-filter: blur(10rpx);
	  border: 1rpx solid rgba(255, 255, 255, 0.2);
	}
	
	/* 主要内容 */
	.main-content {
	  position: relative;
	}
	
	.highest-text {
	  display: block;
	  color: #fff;
	  font-size: 28rpx;
	  margin-bottom: 10rpx;
	  opacity: 0.9;
	}
	
	.amount-text {
	  display: block;
	  color: #fff;
	  font-size: 80rpx;
	  font-weight: bold;
	  line-height: 1;
	  margin-bottom: 10rpx;
	  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
	}
	
	.unit-text {
	  display: block;
	  color: #fff;
	  font-size: 28rpx;
	  opacity: 0.9;
	}
	
	/* 右侧按钮区域 */
	.banner-right {
	  padding: 30rpx;
	  position: relative;
	  z-index: 2;
	  background: rgba(255, 255, 255, 0.05);
	  border-radius: 0 20rpx 20rpx 0;
	}
	
	/* 自动缩放的圆形按钮 */
	.action-button {
	  width: 120rpx;
	  height: 120rpx;
	  background: linear-gradient(135deg, #E53935 0%, #C62828 100%);
	  border-radius: 50%;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  border: 4rpx solid #fff;
	  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
	  transition: all 0.3s ease;
	  cursor: pointer;
	  position: relative;
	  overflow: hidden;
	  animation: pulse 2s infinite;
	}
	
	/* 脉冲动画 */
	@keyframes pulse {
	  0% {
		transform: scale(1);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
	  }
	  25% {
		transform: scale(1.02);
		box-shadow: 0 6rpx 16rpx rgba(229, 57, 53, 0.3);
	  }
	  50% {
		transform: scale(1.05);
		box-shadow: 0 8rpx 20rpx rgba(229, 57, 53, 0.4);
	  }
	  75% {
		transform: scale(1.02);
		box-shadow: 0 6rpx 16rpx rgba(229, 57, 53, 0.3);
	  }
	  100% {
		transform: scale(1);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
	  }
	}
	
	/* 外圈缩放动画 */
	.action-button::after {
	  content: '';
	  position: absolute;
	  top: -8rpx;
	  left: -8rpx;
	  right: -8rpx;
	  bottom: -8rpx;
	  border: 2rpx solid rgba(255, 255, 255, 0.6);
	  border-radius: 50%;
	  animation: ripple 3s infinite;
	  pointer-events: none;
	}
	
	/* 第二个波纹 */
	.action-button .ripple-2 {
	  content: '';
	  position: absolute;
	  top: -12rpx;
	  left: -12rpx;
	  right: -12rpx;
	  bottom: -12rpx;
	  border: 1rpx solid rgba(255, 255, 255, 0.4);
	  border-radius: 50%;
	  animation: ripple2 4s infinite;
	  pointer-events: none;
	}
	
	@keyframes ripple {
	  0% {
		transform: scale(1);
		opacity: 1;
	  }
	  100% {
		transform: scale(1.5);
		opacity: 0;
	  }
	}
	
	@keyframes ripple2 {
	  0% {
		transform: scale(1);
		opacity: 0.8;
	  }
	  100% {
		transform: scale(2);
		opacity: 0;
	  }
	}
	
	/* 按钮光泽效果 */
	.action-button::before {
	  content: '';
	  position: absolute;
	  top: 0;
	  left: -100%;
	  width: 100%;
	  height: 100%;
	  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	  transition: left 0.5s ease;
	}
	
	.action-button:active {
	  transform: scale(0.95);
	  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
	}
	
	.action-button:active::before {
	  left: 100%;
	}
	
	.button-text {
	  color: #fff;
	  font-size: 24rpx;
	  font-weight: bold;
	  text-align: center;
	}
	
	/* 响应式设计 - 按钮自动缩放 */
	@media screen and (max-width: 600rpx) {
	  .action-button {
		width: 80rpx;
		height: 80rpx;
	  }
	  .button-text {
		font-size: 20rpx;
	  }
	  .amount-text {
		font-size: 60rpx;
	  }
	  /* 小屏幕下的动画调整 */
	  .action-button::after {
		top: -6rpx;
		left: -6rpx;
		right: -6rpx;
		bottom: -6rpx;
	  }
	}
	
	@media screen and (min-width: 601rpx) and (max-width: 750rpx) {
	  .action-button {
		width: 100rpx;
		height: 100rpx;
	  }
	  .button-text {
		font-size: 22rpx;
	  }
	}
	
	@media screen and (min-width: 751rpx) {
	  .action-button {
		width: 140rpx;
		height: 140rpx;
	  }
	  .button-text {
		font-size: 26rpx;
	  }
	}
	.image-container {
	  display: flex; 
	  gap: 10px; 
	  margin-bottom: 20px; 
	  width: 100%; 
	}	
	.inline-img {
	  flex: 1; 
	  width: 0; 
	  object-fit: cover; 
	}
	.bottom-image-container {
	  width: 100%; 
	}
	.img {
	  width: 100%; 
	}
	
	.goods-container {
	  padding: 10px;
	  background-color: #fff;
	}
	
	/* tab 栏样式 */
	.tab-bar {
	  display: flex;
	  flex-direction: row;
	  border-bottom: 1px solid #f5f5f5;
	}
	.tab-item {
	  flex: 1;
	  text-align: center;
	  padding: 10px 0;
	}
	.tab-item.active {
	  color: #ff5722; /* 选中 tab 文字颜色，可自定义 */
	}
	.tab-title {
	  font-size: 16px;
	  font-weight: bold;
	}
	.tab-subtitle {
	  font-size: 12px;
	  color: #999;
	}
	
	/* 商品列表样式 */
	.goods-list {
	  display: flex;
	  flex-wrap: wrap;

	  justify-content: space-between;
	}
	.goods-item {
	  width: 48%; /* 一行展示两个商品，可调整 */
	  margin-top: 10px;
	  background: #fff;
	  border-radius: 8rpx;
	  overflow: hidden;
	  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}
	.goods-img {
	  width: 100%;
	  height: 200rpx;
	  object-fit: cover;
	  border-radius: 8rpx;
	}
	.goods-info {
	  padding: 16rpx;
	}
	.goods-name {
	  font-size: 28rpx;
	  line-height: 1.4;
	  color: #333;
	  margin-bottom: 8rpx;
	  display: -webkit-box;
	  -webkit-line-clamp: 2;
	  -webkit-box-orient: vertical;
	  overflow: hidden;
	}
	.goods-price {
	  color: #ff5722;
	  font-size: 32rpx;
	  font-weight: bold;
	  display: block;
	}
</style>
